import React, { PureComponent } from 'react'

import moment from 'moment'

import { Input, Button } from 'antd'

export default class CommentInput extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      content: ''
    }
  }

  render() {
    return (
      <div>
        <Input.TextArea rows={4}
            cols={30}
            style={{marginBottom: '10px'}}
            value={this.state.content}
            onChange={ e => this.handleChange(e) } />
        <Button type='primary'onClick={ e => this.addComment() }>Add Comment</Button>
      </div>
    )
  }

  handleChange(event) {
    this.setState({
      content: event.target.value
    })
  } 

  addComment() {
    const comment = {
      id: moment().valueOf(),
      // avater: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2035944494,3453366933&fm=26&gp=0.jpg',
      avater: '/jjl.jpg',
      nickname: '***',
      datetime: moment(),
      content: this.state.content
    }

    this.props.submitComment(comment)

    this.setState({
      content: ''
    })
  }
}